<template>
	<view class="wraps">
		<image class="top" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/53.png" mode="widthFix"></image>
		<view class="cont">
			<image @click="navTo('/pages/poster')" class="btn" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/54.png" mode="widthFix"></image>
			<view class="scan">
				<view class="item">
					<image  class="icon" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/56.png" mode="widthFix">
					</image>
					<view class="word">
						<view class="top">
							推广攻略
						</view>
						<view class="desc">
							收益玩法总汇
						</view>
					</view>
				</view>
				<view class="item">
					<image class="icon" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/55.png" mode="widthFix">
					</image>
					<view class="word">
						<view class="top">
							推广案例
						</view>
						<view class="desc">
							精准找到用户
						</view>
					</view>
				</view>
			</view>
			<!-- 奖励说明 邀请奖励 -->
			<view class="main">
				<view class="tab" :class="[active==1?'active2':' active1' ]">
					<view @click="active=0" class="tabItem ">
						奖励说明
					</view>
					<view @click="active=1" class="tabItem ">
						邀请奖励
					</view>
				</view>
				<rewardDescription v-if="active==0" />
				
				<invitationRewards v-else />
				
			</view>
		</view>
	</view>
</template>

<script>
	import invitationRewards from './invitationRewards.vue'
	import rewardDescription from './rewardDescription.vue'
	
	
	export default {
		components:{invitationRewards,rewardDescription},
		data() {
			return {
				active: 0
			}
		},
		methods:{
			navTo(url){
				console.log(222222222);
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.top {
		width: 100%;
	}

	page,
	.wraps {
		background: #7C3EFF;
		padding-bottom: 40rpx;
	}

	.main {
		background: #521EBE;
		border-radius: 13rpx;
		

		.tab {
			display: flex;
			align-items: center;
			height: 77rpx;
			.tabItem {
				flex: 1;
				width: 343rpx;
				height: 77rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 38rpx;
				color: #C8AEFF;
				display: flex;
				align-items: center;
				justify-content: center;
				
			}
			&.active1>view:nth-child(1) {
				
				background: url('https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/65.png') no-repeat ;
				background-size: 100% 100%;
			}
			&.active1>view:nth-child(2) {
				background: url('https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/64.png') no-repeat ;
				background-size: cover;
			
			}
			
			&.active2>view:nth-child(1) {
				background: url('https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/66.png') no-repeat;
				background-size: cover;
			}
			&.active2>view:nth-child(2) {
				
				
				background: url('https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/63.png') no-repeat;
				background-size: cover;
			
			}

			
		}
	}

	.cont {
		padding: 0 32rpx;

		.btn {
			width: 100%;
			margin-top: -15rpx;
		}

		.scan {
			margin: 40rpx 0;
			width: 686rpx;
			height: 133rpx;
			background: url('https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/62.png') no-repeat;
			background-size: cover;

			border-radius: 15rpx;
			display: flex;
			align-items: center;

			.item {
				border-right: 1rpx solid #B794FF;
				display: flex;
				align-items: center;
				justify-content: center;

				&:last-child {
					border-right: none;
				}

				flex: 1;

				.icon {
					width: 80rpx;
					height: 80rpx;
					margin-right: 19rpx;
				}

				.top {
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 35rpx;
					margin-bottom: 3rpx;
				}

				.desc {
					font-size: 24rpx;
					font-family: PingFang SC-Light, PingFang SC;
					font-weight: 300;
					line-height: 28rpx;
					background: linear-gradient(180deg, #FFEDAF 0%, #FFFFFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}
	}
</style>
